<template>
  <div class="editInfo">
    <!-- 接收子组件传递的方法，这个方法在点击save后触发 -->
    <hmnavbar
      :path="$route.query.type === 'position' ? '/my' : '/myInfo'"
      :title="title"
      :saveBtn="showSave"
      @editInfo="saveClick"
    >
    </hmnavbar>
    <van-cell-group class="group" v-if="$route.query.type !== 'avatar'">
      <van-field v-model="value" class="input" />
    </van-cell-group>
    <div class="box" v-else>
      <van-uploader
        v-model="fileList"
        :after-read="afterRead"
        :max-count="1"
        class="upload"
      />
    </div>
  </div>
</template>
<script>
// 导入vuex的辅助函数
import { mapState } from 'vuex'
// 导入修改用户信息的网络请求
import { editUserInfoApi, uploadFile } from '../../../api/au.js'
export default {
  data () {
    return {
      value: '',
      title: '' /* 标题 */,
      fileList: []
    }
  },
  computed: {
    ...mapState(['userInfo']),
    showSave () {
      return this.value !== this.userInfo[this.$route.query.type]
    }
  },
  created () {
    // 根据路径拼接的参数判断标题和文本的内容
    if (this.$route.query.type === 'nickname') {
      this.title = '修改昵称'
    } else if (this.$route.query.type === 'intro') {
      this.title = '修改简介'
    } else if (this.$route.query.type === 'avatar') {
      this.title = '修改头像'
    } else if (this.$route.query.type === 'position') {
      this.title = '修改岗位'
    }
    this.value = this.userInfo[this.$route.query.type]
  },
  methods: {
    // 保存按钮被点击的操作
    async saveClick () {
      // 判断当前修改的是哪一项信息
      const key = this.$route.query.type
      // 提示用户正在修改
      this.$toast.loading('修改中...')
      const res = await editUserInfoApi({
        [key]: this.value
      })
      if (res.code === 200) {
        // 发送请求重新获取数据并保存到vuex中
        this.$store.dispatch('setUserInfoAsync')
        // 跳转到我的资料页面
        if (this.$route.query.type === 'position') {
          this.$router.push('/my')
        } else {
          this.$router.push('/myInfo')
        }
        // 提示修改成功
        this.$toast.success('修改成功~')
      }
      /*     if (this.$route.query.type === 'nickname') {
        // 提示用户正在修改
        this.$toast.loading('修改中...')
        // 发送请求修改昵称
        const res = await editUserInfoApi({
          nickname: this.value
        })
        if (res.code === 200) {
          // 发送请求重新获取数据并保存到vuex中
          this.$store.dispatch('setUserInfoAsync')
          // 跳转到我的资料页面
          this.$router.push('/myInfo')
          // 提示修改成功
          this.$toast.success('修改成功~')
        }
      } else if (this.$route.query.type === 'intro') {
        // 提示用户正在修改
        this.$toast.loading('修改中...')
        // 发送请求修改昵称
        const res = await editUserInfoApi({
          intro: this.value
        })
        if (res.code === 200) {
          // 发送请求重新获取数据并保存到vuex中
          this.$store.dispatch('setUserInfoAsync')
          // 跳转到我的资料页面
          this.$router.push('/myInfo')
          // 提示修改成功
          this.$toast.success('修改成功~')
        }
      } */
    },
    // 文件上传前的操作
    beforeRead (file) {
      // 限制头像的大小和格式
      const is2M = file.size / 1024 / 1024 < 2
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!is2M) {
        this.$toast.fail('图片大小不能超过2M')
      }
      if (!isImage) {
        this.$toast.fail('图片只能是 JPG | PNG 格式')
      }
      return isImage && is2M
    },
    // 上传图片的操作
    async afterRead (file) {
      // 1.获取上传文件的信息
      //   console.log(file.file)
      // 2.根据上传文件的信息发送上传文件的请求
      const res = await uploadFile(file.file)
      if (res.code === 200) {
        // 3.获取该文件的id并赋值给发送修改信息请求的参数
        this.value = res.data[0].id

        // 后面不用写，点击保存才操作
        /*     // console.log(res.data[0].id)
        // 4.根据上传文件的id发送修改头像的请求
        const res1 = await editUserInfoApi({
          avatar: res.data[0].id
        })
        if(res1.code===200){
            // 重新获取用户信息
            this.$store.dispatch('setUserInfoAsync')
        } */
      }
    }
  }
}
</script>
<style lang="less" scoped>
.editInfo {
  .group {
    padding: 20px 15px;
    .input {
      padding: 0;
      padding-left: 15px;
      background-color: #f7f4f5;
      height: 34px;
      line-height: 34px;
    }
  }
  .box {
    display: flex;
    justify-content: center;
    .upload {
      /deep/ .van-uploader__upload,
      /deep/ .van-image,
      /deep/ .van-image__img {
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>
